<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_溢出处理</title>
    <style>
        .overflow{
            background-color: lightgreen;
            /*溢出的前提：父元素的大小是明确的*/
            width: 300px;
            height: 600px;
            overflow: visible;/*默认值 溢出可见*/
            overflow: hidden;/*溢出隐藏*/
            overflow: scroll;/*两个方向都显示拖拽条*/
            overflow: auto;/*只有溢出的方向才显示拖拽条*/
        }
        .txt{
            background-color: yellow;
            width: 100px;
            /*以下三句是组合代码，缺一不可！*/
            white-space: nowrap;/*强制文本不换行*/
            overflow: hidden;/*溢出隐藏*/
            text-overflow: ellipsis;/*溢出文字替换为省略号*/
        }
    </style>
</head>
<body>
<div class="txt" title="lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores atque autem beatae blanditiis
    consequuntur culpa debitis delectus dicta distinctio doloremque eaque eius eligendi enim error est et eveniet
    exercitationem expedita fuga fugiat harum hic illum impedit incidunt inventore ipsa ipsum iure labore laboriosam
    laborum laudantium libero magnam maiores maximemolestiae mollitia nam natus neque nesci
</div>
<div class="overflow">
    <img src="../day01/1.jpg">
</div>
</body>
</html>